<!--
  * @Author: ws
  * @Date: 2023-12-29 15:14:29
  * @email: 458658538@qq.com
  * @LastEditors: ws
  * @LastEditTime: 2024-01-05 13:14:21
  * @Description: 
-->
<template>
  <div class="one-collapse-panel">
    <div class="header">
      <slot v-if="collapse.slotTitle" :name="collapse.slotTitle"></slot>
      <div v-else class="header-title">{{ collapse.title || "基本信息" }}</div>
    </div>
    <div class="content">
      <slot v-if="collapse.slotContent" :name="collapse.slotContent"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "OneCollapsePanel",
  props: {
    collapse: { type: Object, default: () => {} },
  },
  data() {
    return {
      activeNames: [],
    };
  },
  computed: {},
  mounted() {
    this.activeNames = [this.collapse.title];
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.one-collapse-panel {
  width: 100%;
  height: 100%;

  .header {
    height: 32px;
    background: rgba($color: #f1f2f5, $alpha: 0.5);

    .header-title {
      position: relative;
      padding: 0;
      margin-left: 16px;
      font-size: 14px;
      // font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      line-height: 32px;
      color: #363f51;
      // line-height: 22px;
      &::after {
        position: absolute;
        top: 8px;
        left: -8px;
        width: 4px;
        height: 16px;
        background: #1d7ff2;
        border-radius: 0 3px 3px 0;
        content: "";
      }
    }
  }
}
</style>
